<template>
  <Form @submit="onSubmit" @failed="onFailed">
    <CellGroup title="" inset>
      <Field
        v-model="pickerForm.client"
        is-link
        readonly
        required
        label="下载器"
        placeholder="点击选择下载器"
        @click="showPicker('client')"
      />
      <Field label="是否开始">
        <template #input>
          <Switch v-model="form.startNow" size="20" />
        </template>
      </Field>
      <Field label="启用目录">
        <template #input>
          <Space>
            <Checkbox v-model="form.enableSiteFolder">站点目录</Checkbox>
            <Checkbox v-model="form.enableCategoryFolder">分类目录</Checkbox>
          </Space>
        </template>
      </Field>
    </CellGroup>
    <div style="margin: 16px;">
      <Button round block type="primary" native-type="submit" loading-type="spinner" :loading="submitting">
        推 送
      </Button>
    </div>
  </Form>

  <Popup v-model:show="showPickerFlag" position="bottom" :lazy-render="false">
    <Picker
      ref="picker"
      :columns="pickerColumns"
      @confirm="pickerConfirm"
      @cancel="showPickerFlag = false"
    />
  </Popup>
</template>
<script setup>
  import { Space, Form, Field, Switch, Checkbox, Cell, CellGroup, Button, Popup, Picker, Notify } from 'vant';
  import { reactive, ref } from 'vue';

  import TorrentApi from '@/api/TorrentApi.js'
  
  import store from '@/store'

  const emits = defineEmits(['close'])


  const form = reactive({
    id: '',
    clientid: '',
    startNow: true,
    enableSiteFolder: false,
    enableCategoryFolder: true,
  });

  const siteOptions = store.state.siteOptions;
  const categoryOptions = store.state.categoryOptions;
  const clientOptions = store.state.clientOptions;
  const libraryOptions = store.state.libraryOptions;


  const pickerForm = reactive({
    type: '',
    site: '',
    category: '',
    client: '',
  });
  const picker = ref(null);
  const showPickerFlag = ref(false);
  const pickerColumns = ref([])
  const showPicker = (type) => {
    pickerColumns.value = clientOptions.map(item => {
      return {
        text: item.name,
        value: item.id,
      }
    })

    // 默认第一个
    pickerForm.client = pickerColumns.value[0].text;
    form.clientid = pickerColumns.value[0].value;

    showPickerFlag.value = true;
  }
  const pickerConfirm = (value) => {
    pickerForm.client = value.text;
    form.clientid = value.value;
    showPickerFlag.value = false;
  }
  
  
  const submitting = ref(false);
  const onSubmit = (values) => {
    // console.log('submit', form);

    if (!form.clientid) {
      Notify({ type: 'warning', message: '请选择下载器' });
      return;
    }

    submitting.value = true;
    TorrentApi.pushToClient(form).then(response => {
      if (response.data.code === 1) {
        
        planForm();
           
        Notify({ type: 'success', message: response.data.message?response.data.message:'推送成功' });

        emits('close');
      } else {
        Notify({ type: 'danger', message: `推送失败：${response.data.message}` });
      }
    }).catch((error)=>{
      Notify({ type: 'danger', message: `推送失败：${error.message}` });
    }).then(()=>{
      submitting.value = false;
    })
  };

  const onFailed = (errorInfo) => {
    // console.log('failed', errorInfo);
    // Notify({ type: 'danger', message: `推送失败：${errorInfo.errors.message}` });
  };

  const planForm = () => {
    form.id = '';
    form.clientid = '';
    form.startNow = true;
    form.enableSiteFolder = false;
    form.enableCategoryFolder = true;

    pickerForm.client = '';
  }

  const initModel = (item) => {
    // console.log(item);
    planForm();
    if (item) {
      form.id = item.id;
      form.clientid = item.clientid;

      if (item.clientid) {
        pickerForm.client = clientOptions.find(op => op.id == item.clientid)?.name;
      }
    }
  }


  defineExpose({
    initModel
  })


  // init functions
  
</script>